// 引入vue
import Vue from 'vue'
// 引入路由
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 在vue中使用路由
Vue.use(VueRouter)

// 配置路由表
const routes = [
  {
    // path 页面跳转组件用的路径 必须配置
    //  / 表示根目录 表示打开 hhttp：//localhost：8080/默认显示该组件
    path: '/',
    // 组件起个名字
    name: 'home',

    // 组件的路径
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import( '../views/AboutView.vue')
  },
  {
    path: '/vue',
    name: 'vue',
    component: () => import( '../views/01vue声明方式/01vue声明式渲染.vue')
  },
  {
    path: '/model',
    name: 'model',
    component: () => import( '../views/02vue指令/01v-model.vue')
  },
  {
    path: '/demo',
    name: 'demo',
    component: () => import( '../views/02vue指令/02demo.vue')
  },
  {
    path: '/html',
    name: 'html',
    component: () => import( '../views/02vue指令/03v-html和v-text.vue')
  },
  {
    path: '/show',
    name: 'show',
    component: () => import( '../views/02vue指令/04v-show和v-if.vue')
  },
  {
     path: '/for',
    name: 'for',
    component: () => import( '../views/02vue指令/05v-for.vue')
  },
  {
    path: '/on',
    name: 'on',
    component: () => import( '../views/03事件/v-on.vue')
  },
  {
    path: '/bind',
    name: 'bind',
    component: () => import( '../views/04属性/v-bind.vue')
  },
  {
    path: '/02demo',
    name: '02demo',
    component: () => import( '../views/04属性/02demo.vue')
  },
   {
    path: '/tab',
    name: 'tab',
    component: () => import( '../views/04属性/tab切换练习.vue')
  },
  {
    path: '/filter',
    name: 'filter',
    component: () => import( '../views/05过滤器/01过滤器.vue')
  },
  {
    path: '/time',
    name: 'time',
    component: () => import( '../views/05过滤器/02过滤时间戳.vue')
  },
  {
    path: '/lef',
    name: 'lef',
    component: () => import( '../views/06生命周期/01生命周期.vue')
  },
  {
    path: '/computed',
    name: 'computed',
    component: () => import( '../views/07计算属性/01computed.vue')
  },
  {
    path: '/feng',
    name: 'feng',
    component: () => import( '../views/07计算属性/平均分.vue')
  },
   {
    path: '/get_set',
    name: 'get_set',
    component: () => import( '../views/07计算属性/计算属性的get和set.vue')
  },
   {
    path: '/watch',
    name: 'watch',
    component: () => import( '../views/08监听属性/01watch.vue')
  },
  {
    path: '/shop',
    name: 'shop',
    component: () => import( '../views/08监听属性/购物车.vue')
  },
  {
    path: '/goshop',
    name: 'goshop',
    component: () => import( '../views/08监听属性/02goshop.vue')
  },
  {
    path: '/watch2',
    name: 'watch2',
    component: () => import( '../views/08监听属性/03watch2.vue')
  },
  {
    path: '/diff',
    name: 'diff',
    component: () => import( '../views/08监听属性/04watch和computed的区别.vue')
  },
  {
    path: '/watch_arr',
    name: 'watch_arr',
    component: () => import( '../views/08监听属性/05watch监听数组.vue')
  },
  {
    path: '/globalCom',
    name: 'globalCom',
    component: () => import( '../views/09组件/01全局组件.vue')
  },
  {
    path: '/temCom',
    name: 'temCom',
    component: () => import( '../views/09组件/02局部组件.vue')
  },
  {
    path: '/father',
    name: 'father',
    component: () => import( '../views/09组件/03父子传参/father.vue')
  },
  {
    path: '/grandpa',
    name: 'grandpa',
    component: () => import( '../views/09组件/04爷传孙/grandpa.vue')
  },
  {
    path: '/router',
    name: 'router',
    component: () => import( '../views/10路由跳转传参/01路由的跳转传参.vue')
  },
  {
    path: '/slot',
    name: 'slot',
    component: () => import( '../views/11插槽/slot.vue')
  },
  {
    path: '/vuex',
    name: 'vuex',
    component: () => import( '../views/12vuex/vuex.vue')
  },
  {
    path: '/vuexFn',
    name: 'vuexFn',
    component: () => import( '../views/12vuex/vuex的四个辅助函数.vue')
  },
   {
    path: '/directive',
    name: 'directive',
    component: () => import( '../views/13自定义指令/01自定义指令.vue')
  },
  {
    path: '/mixin',
    name: 'mixin',
    component: () => import( '../views/14混入/01混入.vue')
  },
  


]
// 创建路由实例
const router = new VueRouter({
  // 路由模式 hash history
  //hash带#影响美观
  // hostory不带#, 有概率刷新404，需要后端支持
  mode: 'history',
  //配置地址前缀
  base: process.env.BASE_URL,
  // 将路由信息进行引入使用
  routes
})
//导出路由 方便main.js中引入使用
export default router
